<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>美多商城-用户中心</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script type="text/javascript" src="js/hosts.js"></script>
    <script type="text/javascript" src="js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
    <script>
        var user_id = sessionStorage.user_id || localStorage.user_id;
        var token = sessionStorage.token || localStorage.token;
        if (!(user_id && token)) {
            location.href = '/login.html?next=/user_center_site.html';
        }
    </script>
</head>
<body>
    <div id="app" v-cloak>
        <div class="header_con">
            <div class="header">
                <div class="welcome fl">欢迎来到美多商城!</div>
                <div class="fr">
                    <div class="login_btn fl">
                        欢迎您：<em>{{ username }}</em>
                        <span>|</span>
                        <a @click="logout">退出</a>
                    </div>
                    <div class="user_link fl">
                        <span>|</span>
                        <a href="user_center_info.html">用户中心</a>
                        <span>|</span>
                        <a href="cart.html">我的购物车</a>
                        <span>|</span>
                        <a href="user_center_order.html">我的订单</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="search_bar clearfix">
            <a href="index2.html" class="logo fl"><img src="images/logo.png"></a>
            <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>
            <div class="search_con fr mt40">
                <input type="text" class="input_text fl" name="" placeholder="搜索商品">
                <input type="button" class="input_btn fr" name="" value="搜索">
            </div>
        </div>

        <div class="main_con clearfix">
            <div class="left_menu_con clearfix">
                <h3>用户中心</h3>
                <ul>
                    <li><a href="user_center_info.html">· 个人信息</a></li>
                    <li><a href="user_center_order.html">· 全部订单</a></li>
                    <li><a href="user_center_site.html">· 收货地址</a></li>
                    <li><a href="user_center_pass.html" class="active">· 修改密码</a></li>
                </ul>
            </div>
            <div class="right_content clearfix">
                    <div class="info_con clearfix">
                    <h3 class="common_title2">修改密码</h3>
                    <div class="site_con pass_change_con">
                        <form v-on:submit.prevent="set_password">
                            <div class="form_group">
                                <label>当前密码：</label>
                                <input v-model="raw_password" v-on:blur="check_rpwd" type="password" name="rpwd" class="input_txt">
                                <span v-show="error_raw_password" class="error">请输入原密码</span>
                            </div>
                            <div class="form_group">
                                <label>新密码：</label>
                                <input v-model="new_password" v-on:blur="check_pwd" type="password" name="pwd" class="input_txt">
                                <span v-show="error_password" class="error">密码最少8位，最长20位</span>
                            </div>
                            <div class="form_group">
                                <label>确认新密码：</label>
                                <input v-model="new_password2" v-on:blur="check_cpwd" type="password" name="cpwd" class="input_txt">
                                <span v-show="error_check_password" class="error">两次输入的密码不一致</span>
                            </div>
                            <input type="submit" name="" value="确 定" class="info_submit">
                        </form>
                </div>
                    </div>

            </div>
            </div>
	</div>


	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>
		</div>
		<p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                host:host,
                user_id: sessionStorage.user_id || localStorage.user_id,
                token: sessionStorage.token || localStorage.token,
                username: sessionStorage.username || localStorage.username,

                error_raw_password:false,
                error_password: false,
                error_check_password: false,

                raw_password:'',
                new_password: '',
                new_password2: '',

            },
            methods:{
                check_rpwd: function(){
                    if (!this.raw_password){
                        this.error_raw_password = true;
                    } else {
                        this.error_raw_password = false;
                    }
                },

                check_pwd: function(){
                    var len = this.new_password.length;
                    if(len<8||len>20) {
                        this.error_password = true;
                    } else {
                        this.error_password = false;
                    }
                },
                check_cpwd: function (){
                    if(this.new_password!=this.new_password2) {
                        this.error_check_password = true;
                    } else {
                        this.error_check_password = false;
                    }
                },
                set_password:function () {
                    this.check_rpwd();
                    this.check_pwd();
                    this.check_cpwd();
                    if (this.error_raw_password == false && this.error_password == false && this.error_check_password == false) {
                        axios.put(this.host + '/users/password/', {
                                raw_password:this.raw_password,
                                password: this.new_password,
                                password2: this.new_password2,
                            }, {
                                 headers: {'Authorization': 'JWT ' + this.token},
                                responseType: 'json'
                            })
                            .then(response => {
                                location.href = '/login.html';
                            })
                            .catch(error => {
                                alert(error.response.data);
                                console.log(error.response.data);
                            })
                    }
                },
                // 退出
                logout: function(){
                    sessionStorage.clear();
                    localStorage.clear();
                    location.href = '/login.html';
        },
            }

        })
    </script>
</body>
</html>